<template>
  <div class="mod-demo-ueditor">
    <!-- <el-alert
      title="提示："
      type="warning"
      :closable="false">
      <div slot-scope="description">
        <p class="el-alert__description">1. 此Demo只提供UEditor官方使用文档，入门部署和体验功能。具体使用请参考：http://fex.baidu.com/ueditor/</p>
        <p class="el-alert__description">2. 浏览器控制台报错“请求后台配置项http错误，上传功能将不能正常使用！”，此错需要后台提供上传接口方法（赋值给serverUrl属性）</p>
      </div>
    </el-alert> -->

    <script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;"></script>


    <!-- <p><el-button @click="sendToOther()">编辑完成</el-button></p> -->
    <!-- <el-form-item label="编辑完成" prop="complete" label-width="100px" style="position:relative;left:-32px;">
      <el-switch
      @change="sendToOther"
      v-model="value2"
      active-color="#13ce66"
      inactive-color="#ff4949">
    </el-switch>
    </el-form-item> -->

    <!-- 获取内容 -->
    <!-- <p><el-button @click="getContent()">获得内容</el-button></p>
    <el-dialog
      title="内容"
      :visible.sync="dialogVisible"
      :append-to-body="true">
      {{ ueContent }}
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog> -->
    <!-- <add-or-update v-if="false" ref="addOrUpdate"></add-or-update> -->
  </div>
</template>

<script>
 import ueditor from 'ueditor'
//  import AddOrUpdate from './communityPublicity-add-or-update'
  export default {
    props:['content'],
    data () {
      return {
        contents:[],
        value1: true,
        value2: true,
        ue: null,
        ueId: this.$store.state.user.id +`_${new Date().getTime()}`,
        ueContent: '',
        config: {zIndex: 3000}
      }
    },
    watch: {
      content: function(newVal,oldVal){
        // this.cData = newVal;  //newVal即是chartData
        // this.drawChart();
      // this.ue.setContent(newVal)
        this.ue.ready(() => {
          this.ue.setContent(newVal)
        })
      },

    },
    mounted () {
      var _this = this
      ueditor.delEditor(this.ueId)
      this.ue = ueditor.getEditor(this.ueId, this.config)
      // setTimeout(function(){ this.ue.setContent("dasd");},2000)
      //this.ue.setContent("dasd")
      this.ue.addListener('ready', () => {
        this.ue.setShow(true)
      })
      this.ue.addListener('blur',function(){
          _this.ueContent = _this.ue.getContent()
          // _this.$emit('ueditorContent',_this.ueContent)// 将编辑好的数据传给父组件
      })

    },
    created() {

    },
    beforeDestroy() {
        // 组件销毁的时候，要销毁 UEditor 实例
        if(this.ue !== null && this.ue.destroy) {
            this.ue.destroy();
        }
    },
    // 引入的组件
    components: {
      // AddOrUpdate
    },
    methods: {
      getContent () {
        this.ue.ready(() => {
          this.ueContent = this.ue.getContent()
        })
        return this.ueContent
      },
      sendToOther(msg){
        // this.$emit('ueditorContent',this.ue.getContent())// 将编辑好的数据传给父组件
        this.ue.ready(() => {
          this.$emit('ueditorContent','龙泉宝剑')// 将编辑好的数据传给父组件
        })
        this.contents[0] = this.value2
        this.contents[1] = this.ue.getContent()
        // this.$emit('ueditorContent','龙泉宝剑')// 将编辑好的数据传给父组件

        //this.$refs.addOrUpdate.getUeditorContent(this.ue.getContent());
      }
    }
  }
</script>

<style lang="scss">
  .mod-demo-ueditor {
    position: relative;
    z-index: 510;
    > .el-alert {
      margin-bottom: 10px;
    }
  }
</style>
